<template>
	<view class="">
		<u-navbar title="在售卡项" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="content">
			<view class="coreshop-padding-15 coreshop-bg-white coreshop-solid-bottom">
				<u-search placeholder="请输卡项名称" v-model="key" :show-action="false" action-text="搜索" :animation="false"
					shape="square" @clear="clear" @search="cardSearch">
				</u-search>
			</view>
			<view>
				<scroll-view scroll-y="true" @scrolltolower="onScrollToLower">
				<view class="card-list" :style="{'height':swiperHeight + 'px'}">
					<view 
						class="card-list-item" 
						:style="{background: item.bgColor}"
						v-for="(item, key) in cardList" 
						:key="key" 
						@click="$u.route('/pages/cardbuy/cardbuyDetails/cardbuyDetails',{id: item.id, type: 1})">
						<view class="tx">
							<view class="name">{{item.name}}</view>
							<view class="coreshop-font-xs">含{{item.projectCount}}种项目</view>
							<view class="c-m-t-30">
								<text class="coreshop-font-xs">￥</text>
								<text>{{item.salePrice}}</text>
							</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</view> 
			<!-- 无数据时默认显示 -->
			<view class="coreshop-emptybox" v-if="cardList.length == 0">
				<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/history.png'" icon-size="150"
					text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperHeight: 0,
				cardList: [],
				key: '',
				longitude: '',
				latitude: '',
				page: 1,
				limit: 200,
			}
		},
		onLoad() {
			this.getCardList();
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.card-list').boundingClientRect()
					let safeAreaBottom  = resu.screenHeight - resu.safeArea.bottom
					query.exec(res => {
						that.swiperHeight = resu.windowHeight - res[0].top - safeAreaBottom
					})
				}
			})
		},
		methods: {
			//卡项搜索
			cardSearch() {
				this.page = 1;
				this.limit = 30;
				this.CardList = [];
				this.getCardList();
			},
			getCardList(){
				let data = {
					'where':JSON.stringify({'searchName':this.key}),
					'page': this.page,
					'limit': this.limit,
				}
				this.$u.api.CardItemList(data).then(res => {
					if(res.code === 0){
						this.cardList = [...this.cardList, ...res.data]
					}else {
						this.$u.toast("获取卡项数据失败");
					}
				});
			},
			onScrollToLower() {
				// this.page ++
				// this.getCardList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-list{
		.card-list-item{
			width: 690rpx;
			margin: auto;
			margin-bottom: 20rpx;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			height: 240rpx;
			background-color: #323434;
			background-image: url('../../../static/images/my/card.png');
			background-size: 50% 50%;
			background-repeat: no-repeat;
			background-position: center left;
			position: relative;
			.tx{
				color:#fff;
				line-height: 1.4;
			}
		}
	}
</style>
